<template>
  <view @click="locateToRecall" class="container" :style="type === 'my' ? 'border-color:#FFFFFF' : ''">
    <view class="box"></view>
    <view class="medio-msg">
      <img
        :src="
          msgInfo.messageType === 'RC:SightMsg'
            ? msgInfo.content.content
            : msgInfo.content.imageUri
        "
        alt=""
        class="pic"
        v-if="
          msgInfo.messageType === 'RC:ImgMsg' ||
          msgInfo.messageType === 'RC:SightMsg'
        "
      />
      <image
        src="@/static/image/chat/play.png"
        class="play-icon"
        v-if="msgInfo.messageType === 'RC:SightMsg'"
      />
    </view>
    <view class="content">
      <view
        class="content__header"
        :style="type === 'my' ? 'color:#FFFFFF' : ''"
      >
      {{
          (msgInfo.info && msgInfo.info.userVo && formatUserName(msgInfo.info.userVo)) ||
          (msgInfo.info && formatUserName(msgInfo.info)) ||
          (msgInfo.info && msgInfo.info.nickName)
        }}
      </view>

      <view
        class="content__bottom"
        :style="type === 'my' ? 'color:rgba(255,255,255,0.6)' : ''"
      >
        <i
          class="iconfont icon-yuyin"
          v-show="msgInfo.messageType === 'RC:HQVCMsg'"
        ></i>
        <rich-text v-if="type === 'my'" class="content__bottom_my omit" :nodes="showLastMessages(msgInfo)"></rich-text>
        <rich-text v-else class="omit" :nodes="showLastMessages(msgInfo)"></rich-text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    msgInfo: {
      default: {}
    },
    type: {
      type: String,
      default: 'other'
    }
  },
  methods: {
    locateToRecall() {
      this.$emit("locateToRecall", this.msgInfo);
    },
    showLastMessages(item) {
      let msg = "";
      switch (item.messageType) {
        case "RC:ImgMsg":
          msg = "photo";
          break;
        case "OL:Recall":
        case "RC:TxtMsg":
          msg = item.content.content;
          break;
        case "RC:SightMsg":
          msg = "video";
          break;
        case "RC:FileMsg":
          msg = item.content.name;
          break;
        case "RC:HQVCMsg":
          msg = "Voice Message";
          break;
        default:
          break;
      }
      return msg;
    },
  },
};
</script>

<style scoped lang="scss">
.omit {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
}
::v-deep .a-link {
  font-size: 24upx !important;
  font-family: HarmonyOS Sans-Regular, HarmonyOS Sans !important;
  font-weight: 400 !important;
  color: rgba(0, 0, 0, 0.6) !important;
  line-height: 36upx !important;
  text-decoration: none !important;
}
.content__bottom_my {
  ::v-deep .a-link {
    font-size: 24upx !important;
    font-family: HarmonyOS Sans-Regular, HarmonyOS Sans !important;
    font-weight: 400 !important;
    color: rgba(255,255,255, 0.6) !important;
    line-height: 36upx !important;
    text-decoration: none !important;
  }
}
.container {
  cursor: pointer;
  height: 76rpx;
  display: flex;
  border-left: 4rpx solid #1973fa;
  padding-left: 24rpx;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 20rpx;

  .medio-msg {
    position: relative;
    margin-right: 8rpx;

    .play-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 32rpx;
      height: 32rpx;
    }
  }

  .icon {
    width: 60rpx;
    height: 60rpx;
    margin-left: 40rpx;
    margin-right: 20rpx;
  }

  .pic {
    width: 76rpx;
    height: 76rpx;
    border-radius: 12rpx;
    vertical-align: middle;
  }

  .content {
    &__header {
      font-size: 24rpx;
      font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
      font-weight: 500;
      color: #1973fa;
      line-height: 36rpx;
    }

    &__bottom {
      max-width: 510rpx;
      // white-space: nowrap; /*内容超宽后禁止换行显示*/
      // overflow: hidden; /*超出部分隐藏*/
      // text-overflow: ellipsis; /*文字超出部分以省略号显示*/
      font-size: 24rpx;
      font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
      line-height: 36rpx;

      .icon-yuyin {
        vertical-align: middle;
      }
    }
  }

  .icon-winfo-icon-guanbi {
    cursor: pointer;
    margin-left: auto;
    margin-right: 52rpx;
    font-size: 36rpx;
    color: #d9d9d9;
  }
}
</style>
